<!--货主端受理详情页-->
<template>
  <div class="gridContainer detialPage">
    <div class="order-detail-top">
      <div class="order-detail-header">
        <span class="f-l">业务单号：
          <i>{{BbMain.BBillNo}}</i>
        </span>
        <em class="f-r" v-if="waitAcc">已完成</em>
      </div>
      <ul class="order-detail-info">
        <li class="displayflex">
          <label>制单时间</label>
          <p class="flex1">{{BbMain.BillDate | time}}</p>
        </li>
        <li class="displayflex">
          <label>供应单位</label>
          <p class="flex1">{{BbMain.SupplyCorpName || "--"}}</p>
        </li>
        <li class="displayflex">
          <label>收货单位</label>
          <p class="flex1">{{BbMain.SaleCorpName}}</p>
        </li>
        <li class="displayflex">
          <label>起运地</label>
          <p class="flex1">{{PoMain.DepartureVenue | removeSplash}}{{PoMain.DepartureAddress}}</p>
        </li>
        <li class="displayflex">
          <label>目的地</label>
          <p class="flex1">{{PoMain.ArrivalVenue | removeSplash}}{{PoMain.ArrivalAddress}}</p>
        </li>
        <li class="displayflex">
          <label>送货联系人</label>
          <p class="flex1">{{PoMain.SendContacts}} {{PoMain.SendContactsTel}}</p>
        </li>
        <li class="displayflex" v-if="BbMain.ADDT">
          <label>实际驶离时间</label>
          <p class="flex1">{{BbMain.ADDT | timeshort}}</p>
        </li>
        <li class="displayflex">
          <label>总件数</label>
          <p class="flex1"><em class="font-red">{{BbMain.Pkgs}}</em>件</p>
        </li>
      </ul>
    </div>

    <div class="order-detail-top" v-if="Exceptions.length > 0">
      <div style="margin-bottom:10px;"  v-for="item in Exceptions">
        <ul class="order-detail-info">
          <li class="displayflex">
            <label>异常原因</label>
            <p class="flex1">{{item.ExceptionMemo || item.Information}}</p>
          </li>
          <li class="displayflex">
            <label>记录时间</label>
            <p class="flex1">{{item.RDate | timeshort}}</p>
          </li>
        </ul>
      </div>
    </div>

    <div class="order-detail-con">
      <dl class="displayflex" v-for="item in BbDetailList">
        <dt class="relaImg">
          <img :src="item.PictContent | filterImg">
        </dt>
        <dd class="flex1">
          <p>{{item.GoodsName}}</p>
          <p>{{item.GoodsCode}}</p>
          <p>{{item.RegistKey}}</p>
          <p>{{item.Producer}}</p>
          <p>共<i class="red">{{(item.Pcks || item.Pkgs) | ceilNum}}</i>件</p>
        </dd>
      </dl>
    </div>
  
    <!--footer-->
    <template v-if="waitAcc">
    <div class="w100fix"></div>
    <div class="checknum-bot displayflex">
      <div class="num">共
        <em class="red">{{BbMain.Pkgs}}</em>件商品</div>
      <div class="flex1">
        <ul class="cf cn-btn-grp f-r">
          <li class="btn-checknum f-l" @click="goPro">进度</li>
        </ul>
      </div>
    </div>
    </template>

    <uploader :title="'提货凭证'" :img-list="Img52" :max="0" v-if="Img52.length > 0"></uploader>
    <uploader :title="'交货凭证'" :img-list="Img56" :max="0" v-if="Img56.length > 0"></uploader>
    <uploader :title="'签收凭证'" :img-list="Img81" :max="0" v-if="Img81.length > 0"></uploader>

    <!--footer-->
  </div>
</template>
<script>
import { mapState } from "vuex";
import uploader from '@/components/share/imageUploader/imageUploader.vue';

export default {
  components:{
    uploader,
  },
  data() {
    return {
      PoMain: {},
      BbMain: {},
      BbDetailList: [],
      HandoverList:[],
      TracingList:[],
      Vehicle:[],
      VehicleDetail:[],
      VehicleExies:[],
      Exceptions:[],
      GpsList:[],

      waitAcc: false,
      Img52: [],
      Img56: [],
      Img81: [],
    }
  },
  computed: {
    userinfo(){
      return localStorage.userinfo?JSON.parse(localStorage.userinfo):null
    },
  },
  created(){
    this.getData();
  },
  
  methods: {
    getData: function () {
      var self = this;
      var query = {
        Guid: this.$route.query.Guid,
      };
      this.Ajax.post('GetOrderDetail', query).then((res) => {
        this.PoMain = res.Data.PoMain;
        this.BbMain = res.Data.BbMain;
        this.BbDetailList = res.Data.BbDetailList;
        this.HandoverList = res.Data.HandoverList;
        this.TracingList = res.Data.TracingList;
        this.Vehicle = res.Data.Vehicle;
        this.VehicleDetail = res.Data.VehicleDetail;
        this.VehicleExies = res.Data.VehicleExies;
        this.Exceptions = res.Data.Exceptions;
        this.GpsList = res.Data.GpsList;

        if(this.PoMain.State == 11) {
          this.waitAcc = true;
        }

        this.HandoverList.forEach((x, i) => {
          let Obj = {},
              Json = [];
          Obj = x.HandoverPict !== '' && x.HandoverPict?JSON.parse(x.HandoverPict):{};
          if(Object.keys(Obj).length > 0){
            Json = Json.concat(Obj.bbill?Obj.bbill : []);
            Json = Json.concat(Obj.platenumber?Obj.platenumber : []);
            Json = Json.concat(Obj.invoice?Obj.invoice : []);
            Json = Json.concat(Obj.logistics?Obj.logistics : []);
            switch(x.HandoverType){
              case '1':
                this.Img52 = Json;
                break;
              case '2':
                this.Img56 = Json;
                break;
              case '3':
                this.Img81 = Json;
                break;
            }
          }
        });
      });
    },
    goPro(){
      this.$router.push({
        path:'processingdetail',
        query:{
          mainguid: this.BbMain.MainPoGuid,
          guid:this.BbMain.Guid,
          billno:this.BbMain.BBillNo
        }
      })
    }
  }
  
};
</script>